<template>
    <div>
        <div class="e-table billList" style="background-color: #fff">
            <!-- 头部buttons -->
            <div class="top">
                <div class="left">
                    <div >
                        <el-button size="small" class="btn-greenYellow" @click="goAdd">新增</el-button>
                    </div>
                </div>
                <div class="search_box">
                    <el-input class="ipt" type="text"
                        placeholder="输入搜索关键字"
                        v-model="query.keyword"
                        @select="onSearch"
                        @change="onSearch"
                    ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
                    <div class="adverse">
                        <el-button type="primary" @click="onAdvanceSearch">高级搜索</el-button>
                    </div>
                </div>
            </div>
                <el-table
                    ref="table"
                    key="tableRef"
                    border
                    style="width: 100%"
                    row-key="billId"
                    :data="tableData"
                    class="table"
                    highlight-current-row
                    height="0"
                    v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
                >
                    <el-table-column
                        prop="billNo"
                        label="结算编号"
                        min-width="200"
                        class-name="blue-column"
                        fixed
                    >
                        <template slot-scope="{ row }">
                            <span @click="onEdit(row)">{{ row.billNo || '无'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="settlementDate"
                        label="结算日期"
                        width="120"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="period"
                        label="期数"
                        width="100"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="contractName"
                        label="合同名称"
                        min-width="200"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="outsourcerName"
                        label="外包方"
                        min-width="200"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="orgName"
                        label="录入机构"
                        min-width="200"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="excludingDepositAmount"
                        label="本期结算金额（不含保证金）"
                        width="200"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="taxAmount"
                        label="税额"
                        width="120"
                    >
                    </el-table-column>
                    <el-table-column prop="totalAmount" width="200" label="本期结算金额（含税）">
                    </el-table-column>
                    <el-table-column prop="currentTotalAmount" width="200" label="截止本期末累计结算金额（含税）">
                    </el-table-column>
                    <el-table-column prop="state" width="100" label="状态">
                        <template slot-scope="{ row,$index }">
                            <ToolHistory v-if="row.state == 1" :key="$index" url="/projectsettle/flowEngin/getAuditHistory" :billId="row.billId" :billType="1099">
                                <span v-status="row.state">
                                    {{ getState(row.state) }}
                                </span>
                            </ToolHistory>
                            <span v-else v-status="row.state">
                                {{ getState(row.state) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sendEasState" width="150" label="传输财务共享">
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <ComPagination
                    :total="total"
                    :pageSize.sync="query.limit"
                    :currentPage.sync="query.page"
                    @currentChange="getData"
                    @sizeChange="getData"
                    class="bottomSetting"
                />
         </div>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { vueDom, advanceSearch, selectDataClient, openAppClient } from '@/utils/common'
import ComPagination from '@/components/pagination/pagination'
import { uidBuilder } from '@/api/base/uid'
import { getUnit } from '@/api/subcontractApi/currency'
import { getLs } from '@/api/settlementManagement/gongchengjieshuan/guochengjieshuan'
import { getCurrentState } from '@/api/settlementManagement/gongchengjieshuan/jiakoukuan'
import { mapMutations, mapState } from 'vuex'
export default {
    components: {
        ComPagination
    },
    computed: {
        ...mapState(['searchData']),
        ...mapState({
            state: state => state.equip.equipData.state, //通用流程状态
        })
    },
    data () {
        return {
            detailsOfProposedArr: [],
            billType: '1099',
            flowParams: {
                'billId': '',
                'billType': '',
                'freeNextUnitIndex': 0,
                'freeNextUser': '',
                'isPass': true,
                'isShareInAudit': true,
                'opinion': '',
                'orgId': '',
                'orgName': '',
                'userId': '',
                'workId': ''
            },
            query: {
                'beginDate': '',
                'contractName': '',
                'endDate': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'outsourcerName': '',
                'page': 1,
                'sendEasStates': [],
                'states': [],
                'settlementType': 1
            },
            total: 0,
            tableData: [],
            mapTableData: {},
            unitList: [],
            isSearch: false,
        }
    },
    created () {
        this.flowParams.billType = this.billType
    },
    mounted () {
        vueDom(
            // 默认0为选中项
            () => {
                $('.el-tree-node:first')?.addClass('is-current')
            },
            () => {
                return $('.el-tree-node:first')?.attr('class')?.includes('is-current')
            }
        )
        getUnit().then(res=>{
            let arr = res.map(x=>{
                let obj = {
                    value: '',
                    label: '',
                }
                obj.value = x.kvValue
                obj.label = x.kvKey
                return obj
            })
            this.unitList = arr
        })
        this.getData()
    },
    methods: {
        ...mapMutations(
            'contract', ['setMaterialList']
        ),
        ...mapMutations(['setHistoryTableData', 'setSelectedInfo']),
        // 获取列表数据
        getData () {
            getLs(this.query).then(resData => {
                this.tableData = resData.list || []
                this.total = resData.totalCount
            })
        },
        goAdd () {
            this.$router.push('/guochengJieshuanAdd')
        },
        async uidBuilder (params) {
            let temp = ''
            await uidBuilder(params).then(res => {
                temp = res.length === 1 ? res[0] : res
            })
            return temp
        },
        onEdit (row) {
            const billId = row.billId
            this.flowParams.billId = billId
            const state = row.state
            if(state == -1 || state == 2 || state == 5 ) {
                this.$router.push({
                    path: '/guochengJieshuanView',
                    query: { billid: billId },
                })
            }else {
                getCurrentState(this.flowParams).then(res => {
                    let name = 'guochengJieshuanView'
                    if(res.canModify) {
                        name = 'guochengJieshuanEdit'
                    }
                    this.$router.push({
                        name,
                        query: { billid: billId },
                        params: { auditState: res }
                    })
                })
            }
        },
        onSearch () {
            this.getData()
        },
        onAdvanceSearch () {
            advanceSearch('/guochengJieshuanSearch')
                .then(res => {
                    this.query.keyword = ''
                    this.query.limit = 20
                    this.query.page = 1
                    const { orgId, outsourcerName, contractName,
                        states, sendEasStates, beginDate, endDate } = res
                    this.query.orgId = orgId
                    this.query.outsourcerName = outsourcerName
                    this.query.contractName = contractName
                    this.query.states = states
                    this.query.sendEasStates = sendEasStates
                    this.query.beginDate = beginDate
                    this.query.endDate = endDate
                    this.getData()
                })
        },
        getState (state) {
            const findObj = this.state.find(item => item.value === Number(state))
            return findObj ? findObj.label : ''
        },
    }
}
</script>
<style lang='scss' scoped>
    ::v-deep .hide-icon{
        .el-table__expand-icon{
            display: none;
        }
    }
    ::v-deep.el-table__row{
        .cell{
            display: flex;
            align-items: center;
        }
        td:nth-child(6),td:nth-child(7),td:nth-child(8){
            .cell{
                justify-content: flex-end;
            }
        }
    }
    ::v-deep .el-popover__reference-wrapper{
        display: flex;
        height: 100%;
    }
    .blue-column span{
        display: block;
    }
</style>
